<template>
  <div>
    <el-form
      :inline="true"
      ref="fromdata"
      :show-message="false"
      :hide-required-asterisk="true"
      :model="fromdata"
      label-width="90px"
      label-position="right"
    >
      <el-row class="">
        <el-col :span="20" style="line-height: 35px;font-weight: bold">跟进信息</el-col>
        <!--<el-col :span="2"><el-button type="success" @click="addFollow">添加跟进信息</el-button></el-col>-->
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-row>
        <el-steps direction="vertical" :active="1" space="100px">
          <el-step v-for="(value, key) in followOptions"
                   :key="key"
                   :title="value.followUpRemark"
                   description="value.description">
            <template slot="description" >
              <span>{{value.userName}}&nbsp; {{value.createTime}}</span>
            </template>
          </el-step>
        </el-steps>
      </el-row>
    </el-form>
    <template>
      <el-dialog title="商机跟进" :visible.sync="showDataVisible" width="1000px">
        <dialog-data-form :value="dialogData" @operate="handleDataOperate"/>
      </el-dialog>
    </template>
  </div>
</template>
followUpByChanceId
<script>
  import { followUpByChanceId } from '@/api/after-sale/client/business'
  import baseMixin from '@/mixins/base'

  export default {
    name: 'carInfo',
    components: { },
    props: {
      value: Object
    },
    mixins: [
      baseMixin({
        format(res) {
          return res.map(data => {
            return data
          })
        }
      })
    ],
    data() {
      return {
        followOptions: [],
        showDataVisible: false
      }
    },
    async created() {
      const { data, success } = await followUpByChanceId(this.value.id)
      if(success){
        data.forEach(item=>{
          this.followOptions.push(item)
        })
      }
      console.info(data)
      this.customerInfo = data
    },
    methods: {
      changeType(item){
        this.selectedTypeText = item.label;
      },
      addFollow() {
        this.showDataVisible = true
        this.dialogData = this.value
      }
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>
  .el-table .delete-row {
    background: #f5f7fa;
    color: #ccc!important;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }
</style>
